<template>
  <view class="template-about tn-safe-area-inset-bottom">

    <view class="top-backgroup">
      <!-- <image src='https://resource.tuniaokj.com/images/my/my-bg2.png' mode='widthFix' class='backgroud-image'></image> -->
    </view>

    <view class="about__wrap">
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <!-- 图标logo -->
            <view class="logo-pic tn-shadow" >
              <view class="logo-image">
                <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_2.jpeg');width: 120rpx;height: 120rpx;background-size: cover;">
                </view>
                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
              </view>
            </view>
            <view class="tn-padding-right tn-color-white">
              <view class="tn-padding-right tn-padding-left-sm tn-text-xxl" style="color: black;">
                后台管理员
              </view>
            </view>
            
          </view>
        </view>
      </view>
      
      <!-- 收益卡片 -->
      <view class="earnings-cards">
        <view class="card-row">
          <view class="earnings-card">
            <view class="card-value">¥{{userStats.todaySales}}</view>
            <view class="card-label">今日收益</view>
          </view>
          <view class="earnings-card">
            <view class="card-value">{{userStats.todayOrders}}</view>
            <view class="card-label">今日订单</view>
          </view>
          <view class="earnings-card">
            <view class="card-value">{{userStats.todayCustomers}}</view>
            <view class="card-label">今日客户</view>
          </view>
        </view>
      </view>

      <!-- 更多信息 -->
      <view class="about-section">
        <view class="menu-item" @click="jumpUrl(0)">
          <view class="left">
            <view class="icon-box tn-cool-bg-color-16">
              <view class="tn-icon-wechat-fill"></view>
            </view>
            <text class="title">关于我们</text>
          </view>
          <view class="right">
            <text class="tn-icon-link"></text>
          </view>
        </view>
        
        <view class="menu-item" @click="jumpUrl(1)">
          <view class="left">
            <view class="icon-box tn-cool-bg-color-5">
              <view class="tn-icon-logo-tuniao"></view>
            </view>
            <text class="title">修改信息</text>
          </view>
          <view class="right">
            <text class="tn-icon-link"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import NavIndexButton from '@/libs/components/nav-index-button.vue'
  export default {
    name: 'about-demo-2',
    mixins: [template_page_mixin],
    components: { NavIndexButton },
    data(){
      return {
        // 用户统计数据
        userStats: {
          todaySales: 0,
          todayOrders: 0,
          todayCustomers: 0
        }
      }
    },
    onShow() {
      this.getTodayStats()
    },
    methods: {
		jumpUrl(e) {
			let url = '';
			switch (e) {
				case 0:
					url = '/pages/usercenter/about/index';
					break;
				case 1:
					url = '/pages/usercenter/info/index';
				
			}
			uni.navigateTo({
				url: url
			})
		},
     
      // 获取今日统计数据
      getTodayStats() {
		  //发送POST请求获取今天的数据_已完成
        uni.$u.http.post('/system/report/rangeTrendData').then(res => {
          if(res.resultCode === 0) {
            const { salesFeeData, custCntData, orderCntData } = res.data
            
            // 获取最后一天(今天)的数据
            const lastIndex = salesFeeData.length - 1
            
            this.userStats = {
              todaySales: parseFloat(salesFeeData[lastIndex] || 0).toFixed(2),
              todayOrders: orderCntData[lastIndex] || 0,
              todayCustomers: custCntData[lastIndex] || 0
            }
          }
        }).catch(err => {
          console.error('获取统计数据失败:', err)
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          })
        })
      },
      
      // 金额格式化
      formatMoney(num) {
        return parseFloat(num || 0).toFixed(2)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-about{
  }
  /* 顶部背景图 start */
  .top-backgroup {
    height: 300rpx;
    z-index: -1;
	background-image: linear-gradient(to bottom, #D6FADB, #f6f7f8);

  }
  /* 顶部背景图 end */
  
  /* 用户头像 start */
  .logo-image{
    width: 120rpx;
    height: 120rpx;
    position: relative;
    background-color: #FFFFFF;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
  }
  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .about {
    
    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: -230rpx;
    }
  }
  /* 页面 end*/
  
  .my-shadow{
      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
      border-radius: 20rpx;
  }
  
  /* 图标容器7 start */
  .icon7 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 10rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 0;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }    
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 28rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
    /* 图标容器1 end */
    
    /* 底部tabbar start*/
    .footerfixed{
     position: fixed;
     width: 100%;
     bottom: 0;
     z-index: 999;
     background-color: #FFFFFF;
     box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    }
    
    .tabbar {
      display: flex;
      align-items: center;
      min-height: 110rpx;
      justify-content: space-between;
    	padding: 0;
    	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
    	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    }
    
    .tabbar .action {
    	font-size: 22rpx;
    	position: relative;
    	flex: 1;
    	text-align: center;
    	padding: 0;
    	display: block;
    	height: auto;
    	line-height: 1;
    	margin: 0;
    	overflow: initial;
    }
    
    .tabbar .action .bar-icon {
    	width: 100rpx;
    	position: relative;
    	display: block;
    	height: auto;
    	margin: 0 auto 10rpx;
    	text-align: center;
    	font-size: 42rpx;
    }
    
    .tabbar .action .bar-icon image {
    	width: 50rpx;
    	height: 50rpx;
    	display: inline-block;
    }
    //收益框
	.earn-navLeft{
		color: white;			  
		font-size: 36rpx;
		margin-left: 40rpx;
		line-height: 70rpx;
	}
	.earn-navRight{
		width: 170rpx;
		height: 70rpx;
		font-weight: bold;
		line-height: 70rpx;
		background-color: #FFCA28;
		border-radius: 24rpx;
		margin-right: 40rpx;
	}
	.earn-nav{
		height: 70rpx;
		width: 100%;
		position: absolute;
		top: 8%;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		text-align: center;
	}
	.earn-firstBox{
		width: 100%;
		position: absolute;
		top: 37%;
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
	.earn-secondBox{
		width: 100%;
		position: absolute;
		top: 70%;
		display: flex;
		flex-direction:row;
		justify-content: space-around;
	}
   .earn-clockUp{
	   color: white;
	  
	   font-size: 40rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
   }
   .earn-clockDown{
	   color: #F8F7F8;
	   opacity: 0.65;
	   font-size: small;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   
	}
	.line-between{
		background-color:white;
		width: 2rpx;
		height:80rpx;
		opacity: 0.5;
	}
    
    /* 收益卡片样式 */
    .earnings-cards {
      padding: 20rpx;
      
      .card-row {
        display: flex;
        justify-content: space-between;
        gap: 20rpx;
      }
      
      .earnings-card {
        flex: 1;
        background: #fff;
        padding: 30rpx 20rpx;
        border-radius: 12rpx;
        text-align: center;
        box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
        
        .card-value {
          font-size: 36rpx;
          color: #4E9B52;
          font-weight: bold;
          margin-bottom: 10rpx;
        }
        
        .card-label {
          font-size: 24rpx;
          color: #666;
        }
      }
    }

    /* 更多信息样式 */
    .about-section {
      margin: 20rpx;
      background: #fff;
      border-radius: 12rpx;
      box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
      
      .menu-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx;
        border-bottom: 1rpx solid #f5f5f5;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:active {
          background: #f9f9f9;
        }
        
        .left {
          display: flex;
          align-items: center;
          
          .icon-box {
            width: 80rpx;
            height: 80rpx;
            border-radius: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20rpx;
            
            .tn-icon-wechat-fill,
            .tn-icon-logo-tuniao {
              font-size: 40rpx;
              color: #fff;
            }
          }
          
          .title {
            font-size: 30rpx;
            color: #333;
          }
        }
        
        .right {
          .tn-icon-link {
            font-size: 32rpx;
            color: #999;
          }
        }
      }
    }
</style>
